<template>
  <div class="refund-record">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="record-list">
            <div class="record-none" v-if="coupons.length<1">暂无记录...</div>
            <coupon-item v-for="(item, index) in coupons" :key="index" :name="item.name" :available="item.available"
            :value="item.value" :start_at="item.start_at" :end_at="item.end_at" :denominations="item.denominations"
            :origin_condition="item.origin_condition" :discount="item.discount"></coupon-item>
        </div>
    </van-pull-refresh>
    <back :scroll="false"></back>
  </div>
</template>

<script>
import couponItem from '../../components/base/coupon-item'
import back from '../../components/base/back.vue'

export default {
  name: 'coupons',
  comments: 'coupons',
  components: {
    'coupon-item': couponItem,
    back
  },
  data () {
    return {
      isLoading: false,
      chosenCoupon: -1,
      coupons: [],
      disabledCoupons: []
    }
  },
  created () {
    document.title = '我的优惠券'
    this.getCoupons()
  },
  methods: {
    // 下拉刷新
    onRefresh () {
      var that = this
      this.$axios.get('/users/' + JSON.parse(localStorage.user).id + '/coupons?amount=11111').then(response => {
        that.coupons = []
        for (var i = 0; i < response.data.length; i++) {
          var c = {
            available: 1,
            discount: 0,
            denominations: response.data[i].credit * 100,
            origin_condition: response.data[i].limit_condition,
            reason: '',
            value: response.data[i].credit,
            name: response.data[i].name,
            start_at: 1489104000,
            end_at: response.data[i].expired_at
          }
          that.coupons.push(c)
        }
        that.$toast('刷新成功')
        that.isLoading = false
      }).catch(error => {
        that.isLoading = false
        console.log(error)
      })
    },
    // 获取卡券
    getCoupons () {
      var that = this
      this.$axios.get('/users/' + JSON.parse(localStorage.user).id + '/coupons?amount=11111').then(response => {
        for (var i = 0; i < response.data.length; i++) {
          var c = {
            available: 1,
            discount: 0,
            denominations: response.data[i].credit * 100,
            origin_condition: response.data[i].limit_condition,
            reason: '',
            value: response.data[i].credit,
            name: response.data[i].name,
            start_at: 1489104000,
            end_at: response.data[i].expired_at
          }
          that.coupons.push(c)
        }
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.refund-record{
    height: auto;
    width: 100%;
    overflow-y: scroll;
}
.record-list{
    margin: 5px;
}
.record-none{
  color: #f8f8f8;
  margin-top: 20px;
}
.record-item{
    border-bottom: 1px solid #fff;
    // background-color: #504e4a;
}
.record-wrap{
    background-color: #eee;
    position: relative;
    height: 60px;
    width: 100%;
    color: #f8f8f8;
}
.record-detail{
    background-color: transparent;
    color: white;
}
.record-img{
    height: 40px;
    width: 40px;
    position: absolute;
    border-radius: 50%;
    background-repeat: no-repea;
    background-size: 100%;
    left: 5%;
    top: 10px;
}
.record-content{
    position: absolute;
    left: 20%;
    top: 10px;
    width: 58%;
    text-align: left;
}
.record-title{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.record-time{
    font-size: 0.6rem;
}
.record-amt{
    position: absolute;
    right: 5%;
    top: 10px;
}
.record-list div:first-child{
    border-radius: 5px 5px 0px 0px;
}
.record-list div:last-child{
    border-radius: 0px 0px 5px 5px;
    border-bottom: none;
}
.refund-search{
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 40px;
    height: 40px;
    z-index: 999;
    border-radius: 50%;
    background-color: #f8f8f8;
    color: white;
    display: flex;
    justify-content: center;
}
.refund-search-icon{
    align-self: center;
}
</style>
